<template>
  <div class="about_index">
    <div class="about_item">
      <img src="@/assets/img/server.png" class="banner_bg" />
      <div class="about_center">
        <div class="about_left">
          <div class="about_title">产品与服务</div>
  
        </div>
      </div>
    </div>
    <div class="section1">
      <div class="center">
        <div class="title">总体架构</div>
        <p>&emsp;&emsp;平台提供完整可靠的设备连接、工业APP运行环境、工业APP服务、工业大数据、DEVOPS等服务，向上根据不同行业属性汇聚成不同的行业云。平台层是从下到上完成数据采集、汇聚、分析、应用的服务体系，为解决区域资源优化配置、行业转型升级提供支撑。</p>
        <img src="@/assets/img/server/cpfw1.png" class="synopsisImg" />
      </div>
    </div>
    <div class="section">
      <div class="center">
        <div class="title">云计算基础平台</div>
        <p>&emsp;&emsp;云计算基础平台构建从镜像制作、打包、上传再到拉取、发布持续集成体系；可快速精准地部署应用程序，即时伸缩应用程序，无缝展现新特征，合理分配资源，提高资源利用率</p>
      </div>
    </div>

  
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
  
  }
};
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 600px; //必须给容器指高度，要不然地图将显示在一个高度为0的容器中，自然看不到
  /deep/ .anchorBL {
    //隐藏左下角百度地图logo
    display: none;
  }
}

.banner_bg {
  width: 100%;
  height: 560px;
  position: absolute;
  left: 0;
  top: 0;
}
.about_item {
  color: #fff;
  height: 560px;
  .about_center {
    position: absolute;
    height: 560px;
    left: 50%;
    top: 0;
    width: 1600px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
     max-width: 1330px;
    // justify-content: center;
    .about_left {
      max-width: 1330px;
      display: flex;
      flex-direction: column;
      .about_title {
        color: #fff;
        font-size: 60px;
        margin-bottom: 20px;
      }
      .about_content {
          max-width: 900px;
        color: #fff;
        font-size: 30px;
         line-height: 50px;
        font-weight: 300;
        margin-top: 10px;
      }
    }
  }
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.section1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fbff;
}
.section2 {
  background: url("../../assets/img/contect.png");
  margin-top: -20px;
  text-align: center;
  width: 100%;
  height: 80px;
}
.center {
  width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}
.title {
  color: #333;
  margin: 0 0 40px;
  font-size: 28px;
  font-weight: 300;
}
p {
  margin-top: 10px;
  line-height: 30px;
  text-align: left;
}

.synopsisImg {
  width: 1280px;
}
.honour_box {
  display: flex;
  margin: 10px 0;
  justify-content: center;
  width: 100%;
  .honour_card {
    width: 44%;
    height: 450px;
    background: #fff;
    margin: 10px 20px;
    border: 1px solid #0068f7;
    .honour_up {
      width: 100%;
      text-align: center;
      .honour_img {
        padding: 10px 0 5px 0;
      }
      .honour_title {
        font-size: 18px;
        margin: 0;
      }
    }
    .honour_down {
      width: 90%;
      margin: 0 5%;
      padding: 10px 0 10px 0;
      text-align: left;
    }
  }
}
.honor_details {
  line-height: 15px;
}
.au_but {
  margin: 25px;
  background: linear-gradient(0deg, #1361fb, #5670b2);
  border: 0;
  color: #fff;
}
.au_but:hover {
  background: #40a9ff;
  border: 0;
}
</style>